<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>App 用户分析</title>
        <!-- 引入 jquery    -->
        <script src="jquery.min.js"></script>
        <!-- 引入 echarts.js -->
        <script src="echarts.min.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 800px;height:600px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            $.get('user_data.json',function (data) {
                myChart.setOption({
                    backgroundColor: 'rgba(25,2,0,0)',
                    title: {
                        x: 'center',
                        y: 'top',
                        text: 'Product Sales',
                        borderColor: 'blue',
                        borderWidth: 2,
                        subtext: '数据演示',
                        itemGap: 10
                    },
                    legend: {orient: 'horizontal', top: '25%'},
                    // dataRange: {
                    //     x: 'right',
                    //     y: 'bottom',
                    //     itemGap: 2,
                    //     splitNumber: 8
                    // },
                    tooltip: {
                        trigger: 'item',
                        hideDelay: 3,
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '10%',
                        right: '20%',
                        height: 180,
                        bottom: '20%',
                        // borderColor: 'red',
                        // borderWidth: 5
                    },
                    dataZoom:{
                        orient: 'vertical',
                        left: 'left'
                    },
                    dataset: {
                        // 提供一份数据。
                        source: data.user,
                        // source: [
                        //     // ['product', '2015', '2016', '2017'],
                        //     ['流失用户', 183472],
                        //     ['回流用户', 6546],
                        //     ['连续活跃用户', 524],
                        //     ['新用户', 91],
                        //     ['活跃用户', 0]
                        // ]
                    },
                    // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                    xAxis: {type: 'category'},
                    // 声明一个 Y 轴，数值轴。
                    yAxis: {},
                    // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                    series: [
                        {
                            // name: '2015',
                            type: 'bar',
                            // encode:{
                            //     x:0,
                            //     y:1,
                            // }
                        }
                    ]
                });
            })
        </script>
    </body>
</html>